import { CSSProperties, Ref } from 'vue';

// 左侧边栏头部样式
export function usePageLeftHead(isShowToggle: Ref<boolean>, closeSidebarHover: Ref<boolean>) {
  // 作为外层 flex 容器的 item 的样式
  const sideBarHeadWrapperStyle: CSSProperties = { flexShrink: 0, flexGrow: 0 };
  // 内部 flex 容器
  const sideBarHeadFlexContainerStyle: CSSProperties = {
    display: 'flex',
    alignItems: 'center',
    height: '45px',
    width: '100%',
    userSelect: 'none',
    cursor: 'pointer',
  };
  // 左边的用户信息和切换用户操作
  const userBarWrapperStyle: CSSProperties = {
    display: 'flex',
    alignItems: 'center',
    width: '100%',
    fontSize: '14px',
    minHeight: '27px',
    padding: '2px 14px',
    marginTop: '1px',
    marginBottom: '1px',
    overflow: 'hidden',
    marginLeft: '0px',
  };
  // 侧边栏收起按钮，位于左边用户信息右侧的左箭头按钮
  const sideSplitToggleWrapperStyle: CSSProperties = {
    display: 'flex',
    alignItems: 'center',
    height: '100%',
    marginLeft: 'auto',
    marginRight: '12px',
  };
  // 侧边栏收起按钮，SVG 容器
  const sideSplitToggleSvgWrapperStyle = computed<CSSProperties>(() => {
    const style: CSSProperties = {
      userSelect: 'none',
      transition: 'background 20ms ease-in 0s',
      cursor: 'pointer',
      opacity: isShowToggle.value ? 1 : 0,
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexShrink: 0,
      borderRadius: '3px',
      height: '24px',
      width: '24px',
      padding: '0px',
      position: 'relative',
      marginLeft: '10px',
    };
    if (closeSidebarHover.value) {
      style.background = 'rgba(55, 53, 47, 0.08)';
    }
    return style;
  });
  return {
    sideBarHeadWrapperStyle,
    sideBarHeadFlexContainerStyle,
    userBarWrapperStyle,
    sideSplitToggleWrapperStyle,
    sideSplitToggleSvgWrapperStyle,
  };
}
